import React, {useState} from 'react';
import style from './indexMainHeader.module.css'
import { Avatar,Image,Row,Col,Button,Space } from 'antd';
import {
    PictureTwoTone,
    EnvironmentTwoTone,
    VideoCameraTwoTone,
    AudioTwoTone,
    SmileTwoTone
} from '@ant-design/icons';
import PostMessage from '../postComponent/index'
const IndexMainHeader = (props) => {
    const [isShow,changeIsShow]=useState(false)
    const res = JSON.parse(localStorage.getItem('usersMessage'))
    return (
        <div className={`${style.body}`}>
            <h2>Home</h2>
            <Avatar src={res.avater} ></Avatar>
            <p className={`${style.title}`} onClick={()=>changeIsShow(true)}>What is happening?</p>
            <PostMessage show={isShow} changeShow={(value)=>changeIsShow(value)}>
            </PostMessage>
            <div className={`${style.bodyBottom}`}>
                <Row>
                    <Col span={8}>
                        <Space>
                            <PictureTwoTone />
                            <EnvironmentTwoTone />
                            <VideoCameraTwoTone />
                            <SmileTwoTone />
                            <AudioTwoTone />
                        </Space>
                    </Col>
                    <Col span={8} offset={8}>
                        <Button type="primary" shape="round" style={{float:'right'}}>
                            发送
                        </Button>
                    </Col>
                </Row>
            </div>
        </div>
    );
}

export default IndexMainHeader;